<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import currentDate from "./utils/getCurrentDate"

import {
  getLineInfo,
  getClasses,
  getWIPData,
  getDeviceData,
  getErrData,
  getFPYData,
  getCapaData
} from './api/index'

import Fa from './components/FA.vue'
import Smt from './components/SMT.vue'

const shiftStr = ref('')

const activeKey = ref('FA')

//筛选项
const lineList = ref<any[]>([])
const cycle = ref(2)
const cycleList = ref([
  { label: '2分钟', value: 2 },
  { label: '3分钟', value: 3 },
  { label: '5分钟', value: 5 }
])

//生产信息
const formState = reactive({
  lineGroup: 'FA',
  line: '',
  shift: ''
})

const handleChange = () => {
  formState.lineGroup = activeKey.value
  //区分FA 和 SMT
  if (activeKey.value === 'FA') {
    queryFAData()
  } else {
    querySTMData()
  }
}

const changeTab = (activeKey: string) => {
  formState.lineGroup = activeKey
  lineList.value = []
  formState.line = ''
  //1 FA; 2 SMT
  if (activeKey === 'FA') {
    getFALineList()
    queryFAData()
  } else {
    getLineList()
    querySTMData()
  }
}
//FA-生产信息
const productFAList = ref([])
//FA-PMP信息
const pmpList = ref([])
//FA-不良信息
const badList = ref([])
//FA-Capa
const capaList = ref([])
//SMT-生产信息
const productSMTList = ref([])
//SMT-不良信息
const badList2 = ref([])
//SMT-WIP信息
const wipList = ref([])
//SMT-设备信息
const deviceList = ref([])
//SMT-PMP信息
const pmpList2 = ref([])

//获取SMT线别
const getLine = () => {
  return new Promise((resolve) => {
    getLineInfo({
      lineGroup: 'SMT'
    }).then((res: any) => {
      console.log(res)
      if (res.code == 200) {
        resolve(res.data || [])
      }
    })
  })
}

const querySTMData = () => {
  const params = {
    ...formState
  }
  getProdData(params)
  getWIP(params)
  getSMTFPY(params)
  getDevData(params)
  getSMTErrInfo(params)
}
//SMT赋值和获取数据
const getLineList = async () => {
  const list = await getLine()
  Object.assign(lineList.value, list)
  formState.line = lineList.value[0].Line
  querySTMData()
}

//SMT获取生产信息
const getProdData = (params: any) => {
  getCapaData(params).then((res: any) => {
    if (res.code == 200) {
      productSMTList.value = res.data
    }
  })
}
//SMT获取不良信息
const getSMTErrInfo = (params: any) => {
  getErrData(params).then((res: any) => {
    if (res.code == 200) {
      badList2.value = res.data
    }
  })
}
//SMT获取设备信息
const getDevData = (params: any) => {
  getDeviceData(params).then((res: any) => {
    if (res.code == 200) {
      deviceList.value = res.data
    }
  })
}
//SMT WIP
const getWIP = (params: any) => {
  getWIPData(params).then((res: any) => {
    if (res.code == 200) {
      wipList.value = res.data
    }
  })
}
//SMT PMP
const getSMTFPY = (params: any) => {
  getFPYData(params).then((res: any) => {
    if (res.code == 200) {
      pmpList2.value = res.data
    }
  })
}

//获取FA线别
const getFALines = () => {
  return new Promise((resolve) => {
    getLineInfo({
      lineGroup: 'FA'
    }).then((res: any) => {
      if (res.code == 200) {
        resolve(res.data || [])
      }
    })
  })
}

//FA赋值和获取数据
const getFALineList = async () => {
  const list = (await getFALines()) as any
  Object.assign(lineList.value, list)
  formState.line = lineList.value[0].Line
  const shiftValue = (await getShift(formState.line)) as string
  formState.shift = shiftValue
  shiftStr.value = formState.shift == 'N' ? '夜班' : '白班'
  queryFAData()
}

const queryFAData = () => {
  const params = {
    ...formState
  }
  getCapaInfo(params)
  getFAProdData(params)
  getFPYProdData(params)
  getFAErrInfo(params)
}

//FA获取生产信息
const getFAProdData = (params:any) => {
  getWIPData(params).then((res: any) => {
    if (res.code == 200) {
      productFAList.value = res.data
    }
  })
}
//FA获取FPY信息
const getFPYProdData = (params: any) => {
  getFPYData(params).then((res: any) => {
    if (res.code == 200) {
      pmpList.value = res.data
    }
  })
}
//FA获取不良信息
const getFAErrInfo = (params: any) => {
  getErrData(params).then((res: any) => {
    if (res.code == 200) {
      badList.value = res.data
    }
  })
}
//FA获取Capa信息
const getCapaInfo = (params: any) => {
  getCapaData(params).then((res: any) => {
    if (res.code == 200) {
      capaList.value = res.data
    }
  })
}

const getShift = (line: string) => {
  const params = {
    line
  }
  return new Promise((resolve) => {
    getClasses(params).then((res: any) => {
      if (res.code == 200) {
        resolve(res.data[0].Value || '')
      }
    })
  })
}

const changeCycle = (value: number) => {
  if (timer) clearInterval(timer)
  timer = null
  timer = setInterval(refresh, value * 1000 * 6)
}

const refresh = async () => {
  if (activeKey.value === 'FA') {
    const shiftValue = (await getShift(formState.line)) as string
    formState.shift = shiftValue
    shiftStr.value = formState.shift == 'N' ? '夜班' : '白班'
    queryFAData()
  } else {
    querySTMData()
  }
}

//每2分钟重复一次
let timer: number | null
timer = setInterval(refresh, cycle.value * 1000 * 6)

onMounted(() => {
  //获取线别
  getFALineList()
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
  timer = null
})
</script>

<template>
  <h2 class="logo"><img src="@/assets/logo.png" width="150" height="30" />生产信息看板系统</h2>
  <header>
    <div class="select-box">
      <a-form layout="inline" autocomplete="off">
        <a-form-item label="线别">
          <a-select
            ref="select"
            v-model:value="formState.line"
            style="width: 95px"
            @change="handleChange"
          >
            <a-select-option v-for="(item, index) in lineList" :key="index" :value="item.Line">{{
              item.Line
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="班次">
          <a-input v-model:value="shiftStr" style="width: 95px"></a-input>
        </a-form-item>
        <a-form-item label="刷新周期">
          <a-select ref="select" v-model:value="cycle" style="width: 95px" @change="changeCycle">
            <a-select-option v-for="(item, index) in cycleList" :key="index" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
    <a-tabs v-model:activeKey="activeKey" @change="changeTab">
      <a-tab-pane key="FA" tab="FA">
        <Fa
          v-if="activeKey === 'FA'"
          :productFAList="productFAList"
          :pmpList="pmpList"
          :badList="badList"
          :capaList="capaList"
        />
      </a-tab-pane>
      <a-tab-pane key="SMT" tab="SMT" force-render>
        <Smt
          v-if="activeKey === 'SMT'"
          :productList="productSMTList"
          :deviceList="deviceList"
          :wipList="wipList"
          :badList2="badList2"
          :pmpList2="pmpList2"
        />
      </a-tab-pane>

      <template #rightExtra>
        <p>日期：{{ currentDate }}</p>
      </template>
    </a-tabs>
  </header>
</template>
<style lang="less" scoped>
@import './assets/reset.less';
.logo {
  position: relative;
  text-align: center;
  letter-spacing: 5px;
  img {
    position: absolute;
    top: 5px;
    left: 0;
  }
}

:deep(.ant-tabs) {
  color: #fff;
}
:deep(.ant-tabs-tab-btn) {
  color: #fff;
}
:deep(
    .ant-tabs-top > .ant-tabs-nav::before,
    .ant-tabs-bottom > .ant-tabs-nav::before,
    .ant-tabs-top > div > .ant-tabs-nav::before,
    .ant-tabs-bottom > div > .ant-tabs-nav::before
  ) {
  border-bottom: 1px solid #1c324f;
}

h2 {
  text-align: center;
  color: #fff;
  margin: 0;
  font-size: 1.8em;
}
header {
  position: relative;
}
.select-box {
  position: absolute;
  top: 7px;
  left: 100px;
  z-index: 99;
}
:deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
  background: #1c324f;
  color: #fff;
  border: 0;
}
:deep(.ant-form-item-label > label) {
  color: #fff;
}
:deep(.ant-input) {
  background: #1c324f;
  color: #fff;
  border: 0;
}
:deep(.ant-alert) {
  padding: 5px;
  margin: 0 auto;
  .ant-alert-icon {
    margin: 0;
  }
}
</style>
